<template>
  <div>
    <div class="box">
      <div class="science_list">
        <el-table
          :data="
            scenicList.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          v-loading="loading"
          style="width: 100%"
        >
          <el-table-column label="ID" width="100" fixed>
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span>{{ scope.row.id }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="头像" fixed>
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <img
                  :src="'https://c2c.kuxia.top' + scope.row.avatar"
                  alt=""
                  style="width: 50px"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="名称" width="150" fixed>
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span>{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="性别" width="150">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span>{{ scope.row.gender }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="电话" width="150">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span>{{ scope.row.tel }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="钱包金额">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span>{{ scope.row.trading }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="钱包充值" width="120">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-button size="small" @click="handleEdit(scope.row.id)"
                  >充值</el-button
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="一级用户" width="150">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-button size="small" @click="displayList(scope.row.name, 1)"
                  >一级用户列表</el-button
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="二级用户" width="150">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-button size="small" @click="displayList(scope.row.name, 2)"
                  >二级用户列表</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paging">
        <el-pagination
          :align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="scenicList.length"
        />
      </div>
    </div>
    <!-- 充值弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="充值">
      <el-form :model="form">
        <el-form-item label="充值金额：">
          <el-input
            v-model="form.money"
            type="number"
            autocomplete="off"
            placeholder="请输入充值金额"
        /></el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelRecharge()">取消充值</el-button>
          <el-button type="primary" @click="affirmRecharge()">
            确认充值
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 列表弹窗 -->
    <el-dialog v-model="dialogTableVisible" :title="grid">
      <el-table :data="gridData">
        <el-table-column property="ID" label="ID" width="150" />
        <el-table-column property="head" label="头像" width="200" />
        <el-table-column property="name" label="用户名" />
        <el-table-column property="tel" label="电话" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { reactive } from "vue";
import {
  Plus,
  Delete,
  Search,
  Grid,
  Upload,
  Operation
} from "@element-plus/icons-vue";
// import { CountTo } from "vue3-count-to";
import { userList, recharge } from "@/api/userList";
// import packpage from "../../../package.json";
// import { useI18n } from "vue-i18n";
// import { getResouceList } from "@/api/index";

// import { useStore } from "vuex";
// import axios from "axios";
import { genFileId, ElMessage } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import { userlist } from "@/pinia/userlist";
const user = userlist();
console.log(user.userlist);
const currentPage = ref(1);
const pageSize = ref(5);
const scenicList = ref([]);
const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const form = reactive({
  money: ""
});
const userId = ref();
const grid = ref();
const gridData = ref([]);
const loading = ref(true);
//请求列表信息
if (user.userlist.length) {
  loading.value = false;
  scenicList.value = user.userlist;
} else {
  user.getList().then(res => {
    loading.value = false;
    console.log(res);
    scenicList.value = res;
  });
}

//显示充值弹窗并存储所点击的用户ID
const handleEdit = id => {
  userId.value = id;
  dialogFormVisible.value = true;
};

//显示充值弹窗并存储所点击的用户ID
const affirmRecharge = () => {
  recharge({
    uid: userId,
    money: form.money
  }).then(res => {
    console.log(res);
    if (res.data.code == 1) {
      ElMessage({
        message: res.data.msg,
        type: "success"
      });
      user.getList().then(res => {
        console.log(res);
        scenicList.value = res;
      });
    } else {
      ElMessage.error(res.data.msg);
    }
  });
  dialogFormVisible.value = false;
  form.money = "";
};
//取消充值
const cancelRecharge = () => {
  dialogFormVisible.value = false;
  form.money = "";
};
//显示列表
const displayList = (name, status) => {
  userList({
    name: name
  }).then(res => {
    console.log(res);
    if (status == 1) {
      grid.value = "一级用户";
      gridData.value = res.data.data.first;
    } else {
      grid.value = "二级用户";
      gridData.value = res.data.data.second;
    }
  });
  dialogTableVisible.value = true;
};

//每页条数改变时触发 选择一页显示多少行
function handleSizeChange(val) {
  console.log(`每页 ${val} 条`);
  currentPage.value = 1;
  pageSize.value = val;
}
//当前页改变时触发 跳转其他页
function handleCurrentChange(val) {
  console.log(`当前页: ${val}`);
  currentPage.value = val;
}
</script>

<style scoped>
.box {
  background-color: white;
  padding: 20px;
}
.button {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.paging {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
